<template>
	<view>
		<view class="topcard">
			<view class="topcard_un">
				<view class="un_left">
					<view class="unleft_top">总资产(元)</view>
					<view class="unleft_bottom">0.00</view>
				</view>
				<view class="un_right">
					<button style="width: 70px;height: 30px;background-color: #fff;color: #F34B3C;text-align: center;line-height: 30px;font-size: 15px;border-radius: 30px;border: 0px;margin-top: 22%;margin-left: 55%;" @click="torecharge()">充值</button>
				</view>
			</view>
			<view class="topcard_dw">
				<view class="dw_left">
					<view class="dwleft_top">累计充值(元)</view>
					<view class="dwleft_bottom">0</view>
				</view>
				<view class="dw_right">
					<view class="dwright_top">累计消费(元)</view>
					<view class="dwright_bottom">0</view>
				</view>
			</view>
		</view>
		
		<view class="userplotmenu">
			<view class="userplotmenus" v-for="(item,index) in userplotmenufirst" >
				<view class="userplotmenus_img" @click="tobankcard(item,index)">
					<image :src="item.img" style="width: 35%;height: 40px;margin-left: 31%;margin-top: 18px;"></image>
				</view>
				<view class="userplotmenus_name">
					{{item.name}}
				</view>
			</view>
		</view>
		
		<view class="userplotlist">
			<view class="userplotlists">
				<view class="userplotlists_left">
					<view class="userplotlistsleft_top">签到领积分</view>
					<view class="userplotlistsleft_bottom">赚积分抵现金</view>
				</view>
				<view class="userplotlists_right">
					<image src="../../../static/images/juserplotmenu4.png" style="width: 80%;margin-left: 12%;height: 65px;margin-top: 12px;"></image>
				</view>
			</view>
			<view class="userplotlistb">
				<view class="userplotlists_left">
					<view class="userplotlistsleft_top">领取优惠券</view>
					<view class="userplotlistsleft_bottom">满减享优惠</view>
				</view>
				<view class="userplotlists_right">
					<image src="../../../static/images/juserplotmenu5.png" style="width: 82%;margin-left: 13%;height: 70px;margin-top: 12px;"></image>
				</view>
			</view>
		</view>
		
		<view class="tuijian">
			<view class="left">
				——————·
			</view>
			<view class="center">
				热门推荐
			</view>
			<view class="right">
				·——————
			</view>
		</view>
		
		<view class="shopmenu">
			<view class="shopmenus" v-for="(item,index) in shopmenu">
				<view class="shopmenus_img">
					<image :src="item.img" style="width: 100%;height: 90%;"></image>
				</view>
				<view class="shopmenus_name">
					{{item.name}}
				</view>
				<view class="shopmenus_price">
					<text style="font-size: 10px;">￥</text>{{item.price}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userplotmenufirst:[
					{img:'../../../static/images/juserplotmenu1.png',name:'银行卡'},
					{img:'../../../static/images/juserplotmenu2.png',name:'消费记录'},
					{img:'../../../static/images/juserplotmenu3.png',name:'积分中心'}
				],
				shopmenu:[
					{img:'../../../static/images/juserplotmenu6.png',name:'Apple/苹果 iPone 12...',price:998.00},
					{img:'../../../static/images/juserplotmenu7.png',name:'Apple/苹果 iPone 12...',price:998.00},
					{img:'../../../static/images/juserplotmenu7.png',name:'Apple/苹果 iPone 12...',price:998.00},
					{img:'../../../static/images/juserplotmenu6.png',name:'Apple/苹果 iPone 12...',price:998.00},
				]
			}
		},
		methods: {
			tobankcard(item,index){
				console.log(item,index,222)
				if(index==0){
					uni.navigateTo({
						url:'bankcard/bankcard'
					})
				}else if(index==1){
					uni.navigateTo({
						url:'consumption/consumption'
					})
				}
			},
			torecharge(){
				uni.navigateTo({
					url:'recharge/recharge'
				})
			}
		}
	}
</script>

<style scoped>
    .topcard{
		width: 96%;
		height: 200px;
		margin-left: 2%;
		background-color: #F34B3C;
		border-radius: 10px;
		margin-top: 20px;
	}
	.topcard_un{
		width: 100%;
		height: 100px;
		display: flex;
		flex-wrap: nowrap;
	}
	.un_left{
		width: 50%;
		height: 100px;
	}
	.unleft_top{
		width: 100%;
		height: 50px;
		line-height: 70px;
		font-size: 12px;
		color: #ccc;
		padding-left: 10%;
	}
	.unleft_bottom{
		width: 100%;
		height: 50px;
		line-height: 30px;
		font-size: 35px;
		color: #fff;
		padding-left: 10%;
	}
	.un_right{
		width: 50%;
		height: 100px;
	}
	.topcard_dw{
		width: 100%;
		height: 100px;
		display: flex;
		flex-wrap: nowrap;
	}
	.dw_left{
		width: 50%;
		height: 100px;
	}
	.dwleft_top{
		width: 100%;
		height: 50px;
		line-height: 70px;
		padding-left: 10%;
		font-size: 12px;
		color: #CCCCCC;
	}
	.dwleft_bottom{
		width: 100%;
		height: 50px;
		line-height: 20px;
		font-size: 25px;
		color: #fff;
		padding-left: 10%;
	}
	.dw_right{
		width: 50%;
		height: 100px;
	}
	.dwright_top{
		width: 100%;
		height: 50px;
		line-height: 70px;
		padding-left: 10%;
		font-size: 12px;
		color: #CCCCCC;
	}
	.dwright_bottom{
		width: 100%;
		height: 50px;
		line-height: 20px;
		font-size: 25px;
		color: #fff;
		padding-left: 10%;
	}
	.userplotmenu{
		width: 100%;
		height: 100px;
		display: flex;
		flex-wrap: nowrap;
		background-color: #fff;
	}
	.userplotmenus{
		width: 33%;
		height: 100px;
	}
	.userplotmenus_img{
		width: 100%;
		height: 70px;
		line-height: 70px;
	}
	.userplotmenus_name{
		width: 100%;
		height: 30px;
		line-height: 10px;
		text-align: center;
		font-size: 15px;
		color: #c0c0c0;
	}
	
	.userplotlist{
		width: 96%;
		height: 100px;
		margin-left: 2%;
		display: flex;
		flex-wrap: nowrap;
		background-color: #fff;
	}
	.userplotlists{
		width: 49%;
		height: 90px;
		margin-top: 10px;
		background-color: #FFF5D2;
		margin-left: 1%;
		border-radius: 8px;
		display: flex;
		flex-wrap: nowrap;
	}
	.userplotlists_left{
		width: 60%;
		height: 90px;
	}
	.userplotlistsleft_top{
		width: 100%;
		height: 45px;
		line-height: 55px;
		padding-left: 10px;
		font-size: 17px;
		color: #E43D33;
	}
	.userplotlistsleft_bottom{
		width: 100%;
		height: 45px;
		line-height: 30px;
		padding-left: 10px;
		font-size: 14px;
		color: #F0AD4E;
	}
	.userplotlists_right{
		width: 40%;
		height: 90px;
	}
	.userplotlistb{
		width: 49%;
		height: 90px;
		margin-top: 10px;
		background-color: #FFF3F3;
		margin-left: 1%;
		border-radius: 8px;
		display: flex;
		flex-wrap: nowrap;
	}
	.tuijian{
		width: 100%;
		height: 60px;
		line-height: 60px;
		display: flex;
		flex-wrap: nowrap;
		font-size: 14px;
	}
	.left{
		width: 25%;
		height: 60px;
		margin-left: 13%;
	}
	.center{
		width: 25%;
		height: 60px;
		text-align: center;
	}
	.right{
		width: 25%;
		height: 60px;
	}
	.shopmenu{
		width: 96%;
		height: 100%;
		margin-left: 2%;
		display: flex;
		flex-wrap: wrap;
	}
	.shopmenus{
		width: 49%;
		height: 250px;
		margin-left: 1%;
	}
	.shopmenus_img{
		width: 100%;
		height: 200px;
	}
	.shopmenus_name{
		width: 100%;
		height: 25px;
		line-height: 25px;
	}
	.shopmenus_price{
		width: 100%;
		height: 25px;
		line-height: 25px;
		font-size: 14px;
		color: red;
	}
</style>

